<template>
  <div class="dashboard-editor-container">

        <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
        <vue-draggable-resizable
          :isActive="true"
          w="auto"
          h="auto"
          :grid="[20,40]"
          :resizable="false"
          :draggable="false"
        >

          <div id="xg-left" ></div>
          <div id="xg-center" >
            <div style="font-size: 30px;text-align: center;margin-top: 10px;color: #739BC3;">
              <!--          浙江省淡水水产研究所智能信息化管理系统-->
              {{indexset}}
            </div>
            <div style="margin-top: 10px;text-align: center;width: 648px;">
              <div style="font-size: 14px;color: white;">
                <!--            <span style="">雨量:0.0mm |</span>-->
                <!--            <span style="">温度:34.8℃ |</span>-->
                <!--            <span style="">湿度:54.8% |</span>-->
                <!--            <span style="">气压:1009.2hPa |</span>-->
                <!--            <span style="">风速:2.1m/S |</span>-->
                <!--            <span style="">风向:4.9° |</span>-->
                <!--            <span style="">辐射:0.6Ci</span>-->
              </div>
            </div>
          </div>
          <div id="xg-right" ></div>


          <VueDragResize v-for="collectPoint in collectPointList" :key="collectPoint.id" :isActive="true" :w="170"
                         v-on:dragging="resize"
                         v-on:dragstop="dragstop(collectPoint)"
                         :isResizable="false"
                         :x="parseInt(collectPoint.rellatitude)"
                         :y="parseInt(collectPoint.rellongitude)" v-if="collectPoint.isDs==='Y'">

            <div style="color: white;font-size: 12px;width: 240px;">

              <span v-if="realDatas[collectPoint.id]">
                <div class="data_div">
                  <div class="div_t_title">{{collectPoint.name}}</div>

                  <div class="div_t_hd">{{realDatas[collectPoint.id]['collecTimes']}}</div>
                  <div v-for="(pointParam,inx) in realDatas[collectPoint.id]['pointParams']" v-if="pointParam.paramInfo.paramType=='num' && inx<10">
                    <el-row style="height: 20px;line-height: 20px;">
                      <el-col :span="12" style="text-align: right;color: #d5a41b;"><span>{{pointParam.paramInfo.name}}：</span></el-col>
                      <el-col :span="12" style="">
                        <span v-html="realDatas[collectPoint.id]['param'+pointParam.paramId]"></span>
                        <span>{{pointParam.paramInfo.unit}}</span>
                      </el-col>
                    </el-row>
                    <div style="clear: both;"></div>
                  </div>
                </div>
              </span>

            </div>
          </VueDragResize>

      </vue-draggable-resizable>
      <img :src="pmtUrl" style="width: 1915px;height: 1075px;">

  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import VueDraggableResizable from "vue-draggable-resizable";
  import VueDragResize from 'vue-drag-resize';
  import { listCollectPointAndStatus,uploadLonLat } from "@/api/basic/collectPoint";
  const defaultSettings = require('@/settings.js');

export default {
  name: "RelFace",
  components: {
    VueDraggableResizable,VueDragResize
  },
  data() {
    return {
      indexset:'浙江省淡水研究所德清基地信息化服务平台',
      sysName: defaultSettings.title,
      activeIndex: '/relFace',
      pic:require('@/assets/image/area.png'),
      pmtUrl:require('@/assets/image/pmt.png'),
      collectPointList:[],
      collectPointStatusMap:{},
      realDatas:{},
      detailTitle:'',
      detailOpen:false,
      collectPointVo:{},
      top: 0,
      left: 0
    };
  },
  created() {
    this.getPmtUrl();
    this.getList();
  },
  methods: {
    resize(newRect) {
      // console.log(newRect)
      this.top = newRect.top;
      this.left = newRect.left;
    },
    dragstop(collectPoint){
      // console.log(collectPoint)
      let obj = {
        id:collectPoint.id,
        rellongitude: this.top,
        rellatitude: this.left
      }
      uploadLonLat(obj).then(response => {
        if (response.code === 200) {
          // this.msgSuccess("保存成功");
        }
      });
    },
    toBack(){
      //指定跳转地址
      this.$router.replace('/frontEndIndex')
    },
    getPmtUrl(){
      getSysConfig().then(response => {
        if(response.data.relPmtPic!=undefined && response.data.relPmtPic){
          this.pmtUrl = response.data.relPmtPic;
          this.indexset = response.data.indexset;
        }
      });
    },
    async fullClick(){
      this.$refs.fullChild.click();
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    },
    getList() {
      listCollectPointAndStatus().then(response => {
        this.collectPointList = response.collectPoints;
        this.realDatas = response.realDatas;
      });
    },
    clickSite(collectPoint){
      this.collectPointVo = collectPoint;
      this.detailOpen=true;
    },
    closeDetailDialog(){
      this.$refs.refSiteDetail.clickStopRealPlay();
      this.$refs.refSiteDetail.onLogout();
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss">
  .vdr {
    border: none;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top:0vh !important;
  }

  #xg-left{
    left: 600px;
    position:absolute;
    width:100px;
    height:80px;
    box-sizing:border-box;
    background:linear-gradient(70deg, transparent 49.5%, #3A71A8 49.5%,
      #3A71A8 50.5%, transparent 50.5%);
  }

  #xg-center{
    left: 665px;
    position:absolute;
    width:648px;
    height:80px;
    box-sizing:border-box;
    border-bottom: 1px solid #3A71A8;
    /*background:linear-gradient(70deg, transparent 49.5%, deeppink 49.5%,
      deeppink 50.5%, transparent 50.5%);*/
  }

  #xg-right{
    left: 1278px;
    position:absolute;
    width:100px;
    height:80px;
    box-sizing:border-box;
    background:linear-gradient(-70deg, transparent 49.5%, #3A71A8 49.5%,
      #3A71A8 50.5%, transparent 50.5%);
  }
  .data_div{
    background-color: #0C2329;
    border: 1px #4EA5AF solid;
    border-radius:5px;
    opacity: 0.9;
  }
  .div_t_title {
    width: 100%;
    height: 25px;
    line-height: 25px;
    color: #d5a41b;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
  }
  .div_t_hd {
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #d5a41b;
    text-align: center;
  }

</style>

